<!--<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Draggable Panels - Dra&amp;Drop box</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Tables</a>
            </li>
            <li class="active">
                <strong>Draggable Panels - Dra&amp;Drop box</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>

<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row" id="sortable-view">
        <div class="col-lg-6 connectPanels" ui-sortable="sortableOptions" ng-model="demo">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Drag&amp;Drop</h5>
                    <div class="ibox-tools">
                        <label class="label label-primary">You can drag and drop me to other box.</label>
                    </div>
                </div>
                <div class="ibox-content">
                    <h2>
                        This is simple box container nr. 1
                    </h2>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                        remaining essentially unchanged.
                    </p>
                </div>
            </div>
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Drag&amp;Drop</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">Config option 1</a>
                            </li>
                            <li><a href="#">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h2>
                        This is simple box container nr. 3
                    </h2>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                        remaining essentially unchanged.
                    </p>
                </div>
            </div>

        </div>
        <div class="col-lg-6 connectPanels" ui-sortable="sortableOptions" ng-model="demo">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>Drag&amp;Drop</h5>
                </div>
                <div class="ibox-content">
                    <h2>
                        This is simple box container nr. 2
                    </h2>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                        remaining essentially unchanged.
                    </p>
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <h5>Drag&amp;Drop</h5>
                </div>
                <div class="ibox-content">
                    <h2>
                        This is simple box container nr. 4
                    </h2>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                        remaining essentially unchanged.
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>-->
<style>

  *{
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  }
  [ng-drag]{
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  [ng-drag]{
    width: 100px;
    height: 100px;
    background: rgba(255,0,0, 0.5);
    color:white;
    text-align: center;
    padding-top:40px;
    display: inline-block;
    margin:0 10px;
    cursor: move;
  }
  ul.draggable-objects:after{
    display: block;
    content:"";
    clear:both;
  }
  .draggable-objects li{
    float:left;
    display: block;
    width: 120px;
    height:100px;
  }
  [ng-drag].drag-over{
    border:solid 1px red;
  }
  [ng-drag].dragging{
    opacity: 0.5;
  }
  [ng-drop]{
    background: rgba(0,255,0, 0.5);
    text-align: center;
    width: 600px;
    height: 200px;
    padding-top:90px;
    display: block;
    margin:20px auto;
    position: relative;
  }
  [ng-drop].drag-enter{
    border:solid 5px red;
  }
  [ng-drop] span.title{
    display: block;
    position: absolute;
    top:50%;
    left:50%;
    width: 200px;
    height: 20px;
    margin-left: -100px;
    margin-top: -10px;
  }
  [ng-drop] div{
    position: relative;
    z-index: 2;
  }

</style>
<div class="container">

  <div class="row">
    <h1>ngDraggable Example</h1>
  </div>

  <ul class="draggable-objects">
    <li  ng-repeat="obj in draggableObjects" >
      <div ng-drag="true" ng-drag-data="obj" data-allow-transform="true"> {{obj.name}} </div>
    </li>
  </ul>

  <hr/>
  <div ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
    <span class="title">Drop area #1</span>

    <div ng-repeat="obj in droppedObjects1" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragSuccess1($data,$event)" ng-center-anchor="{{centerAnchor}}">
      {{obj.name}}
    </div>

  </div>

  <div ng-drop="true" ng-drop-success="onDropComplete2($data,$event)">
    <span class="title">Drop area #2</span>

    <div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}">
      {{obj.name}}
    </div>

  </div>
  <hr>
  <div class="col-lg-12">
    <p>
      使用说明：<br>
      插件网址:http://ngmodules.org/modules/ngDraggable<br>
      引入依赖：angular.module('app', ['ngDraggable']);<br>
      引入介绍：'bower_components/ngDraggable/ngDraggable.js'<br>
      函数介绍：<br>
      ng-drag : 表示该元素能够被拖动<br>
      ng-drag-data : 表示拖动元素时跟着被拖走的数据<br>
      ng-drop : 表示该元素内可放置被拖动的元素<br>
      ng-drop-success : 放置在ng-drop所在元素里后触发，一般写事件.<br>
      ng-drop-success触发的dropComplete方法的参数说明：<br>
      $index : 表示拖动的数据所落的元素的下标<br>
      $data : 被拖动的数据对象<br>
      <br>
      <strong>本系统使用页面：<a ui-sref="index.schedule">排课表</a></strong><br>
    </p>
  </div>



</div>
